<template>
  <div class="login">
    <van-nav-bar left-arrow title="会员登录" @click-left="$router.back()" />
    <div class="content">
      <div class="cont-head">
        <div class="head-1">手机号登录</div>
        <div class="head-2">未注册的手机号登录后将自动注册</div>
      </div>
      <div class="cont-form">
        <div class="form-item">
          <input placeholder="请输入手机号码" type="text" />
        </div>
        <div class="form-item">
          <input placeholder="请输入图形验证码" type="text" />
          <img v-if="picUrl" :src="picUrl" alt="" @click="getPicCode" />
        </div>
        <div class="form-item">
          <input placeholder="请输入短信验证码" type="text" />
          <button class="btn" @click="getSecond">
            {{ totalSecond }}
            获取验证码
          </button>
        </div>
      </div>
      <van-button color="linear-gradient(to right, #EEB037, #FD9616)">
        登录
      </van-button>
    </div>
  </div>
</template>
<script>
import request from '@/util/request'

export default {
  name: 'loginCom',
  components: {},
  data () {
    return {
      picCode: '', // 用户输入的验证码
      picKey: '', // 图形验证码的key
      picUrl: '' // 存储接口请求来的图片
    }
  },

  computed: {},

  methods: {
    async getPicCode () {
      const {
        data: {
          data: { base64, key }
        }
      } = await request.get('/captcha/image')
      this.picUrl = base64
      this.picKey = key
    }
  },

  async created () {
    this.getPicCode()
  }
}
</script>
<style lang="less">
.login {
  .content {
    .login-btn {
      margin-top: 20px;
    }

    .van-button {
      margin-top: 50px;
      width: 100%;
      border-radius: 30px;
      font-size: 20px;
    }

    padding: 80px 30px;

    .cont-head {
      margin-bottom: 60px;

      .head-1 {
        font-size: 35px;
        margin-bottom: 20px;
      }

      .head-2 {
        color: #c1c5c8;
      }
    }

    .cont-form {
      .form-item {
        padding: 30px 20px;
        border-bottom: 1px solid #f5f5f5;

        .btn {
          border: none;
          color: #d4c59d;
          background-color: white;
          float: right;
          margin-right: 10px;
          font-size: 14px;
        }

        img {
          width: 110px;
          height: 30px;
          float: right;
          margin-bottom: auto;
        }

        input {
          border: none;
          font-size: 15px;
          width: 150px;
          height: 30px;
        }
      }
    }
  }
}
</style>
